import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
//引入基础样式
import "@/assets/css/base.css";
import "@/assets/css/el-reset.css";
//引入侧边栏菜单插件
import subMenu from "qf-sub-menu";
//引入进度条
import nprogress from "nprogress";
//引入进度条css文件
import "nprogress/nprogress.css";
Vue.use(subMenu);
Vue.use(ElementUI);
Vue.config.productionTip = false;
//全局前置钩子(路由守卫)
router.beforeEach((to, from, next) => {
  nprogress.start();
  //to 即将进入的路由
  //from 即将离开的路由
  //next 放行
  //判断本地存储中是否有token
  //除了登入页以外,其它所有的页面,在没有登入的情况下都不给用户访问
  //如果有就放行,如果没有就不通过,重新跳转到登入页
  // console.log(to)
  let token = localStorage.getItem("qf-token") || "";
  if (token) {
    //已经登入
    //获取用户菜单;
    //store中sideMenu是否为空数组,如果是空数组,就要获取用户菜单了
    if (store.state.sideMenu.length === 0) {
      // console.log(store.dispatch("GET_MENULIST"))
      store
        .dispatch("GET_MENULIST") //因为action函数我加了async 所以它是个promise<pendding>
        .then(() => {
          next({ path: to.path }); //这里要注意,如果直接next,那么那个时候的动态路由还没生成,我们需要废掉前一个路由,再跳转一次,确保动态路由生效了
        });
    } else {
      next();
    }
  } else {
    //没有登入
    //判断是不是访问的登入页
    if (to.path !== "/login") {
      //跳转到登入页
      next({ path: "/login" });
    } else {
      next();
    }
  }
});

router.afterEach((to, from) => {
  //全局后置钩子
  nprogress.done();
  // console.log(to)
  // console.log(from)
  //深拷贝 浅拷贝 lodash=>deepclone() JSON.stringify() JSON.parse()
  let matched = [...to.matched]; //浅拷贝到一个新的数组
  matched.splice(0, 1);
  //  console.log(matched)
  //调用commit触发mutation 更改vuex中存储的breadCrumb

  store.commit("SET_BREADCRUMB", matched);
});

new Vue({
  store,
  router,
  render: (h) => h(App),
}).$mount("#app");
